const gobal = {
    clock: 0
};

(function() {
    let gridEls = document.getElementsByClassName('grid'),
        startBtn = document.querySelector('.start-btn'),
        endBtn = document.querySelector('.end-btn'),
        changeBlock = true;
    startBtn.onmousedown = function() {
        if (changeBlock) {
            clearInterval(gobal.clock);
            strobe(gridEls, 3, 1000); 
        }
        changeBlock = false;
    }
    endBtn.onmousedown = function() {
        if (!changeBlock) {
            clearInterval(gobal.clock);
            for (let i = 0, len = gridEls.length; i < len; i++) {
                let el = gridEls[i];
                el.style.backgroundColor = '#90A4AE';
            }
        }
        changeBlock = true;
    }
}());
function createColor(num) {
    let value = Array(),
        color = Array(num);
    for (let i = 0; i < num; i++) {
        value[i] = Math.floor(Math.random() * 255);
        value[i + 1] = Math.floor(Math.random() * 255);
        value[i + 2] = Math.floor(Math.random() * 255);
        color[i] = 'rgb(' + value[i] + ',' + value[i + 1] + ',' + value[i + 2] + ')';
    }
    return color;
}
function createNumber(num1, num2) {
    let number = Array(num1);
    for (let i = 0; i < num1; i++) {
        number[i] = i;
    }
    for (let i = 0; i < num1; i++) {
        let iRand = parseInt(num1 * Math.random()),
            temp = number[i];
        number[i] = number[iRand];
        number[iRand] = temp;
    }
    return number.slice(0, num2);
}

function strobe(els, num, time) {
    gobal.clock = setInterval(function() {
        for (let i = 0, len = els.length; i < len; i++) {
            let el = els[i];
            el.style.backgroundColor = '#90A4AE';
        }
        let colorArr = createColor(num),
            numberArr = createNumber(9, num);
        for (let i = 0, len = numberArr.length; i < len; i++) {
            let index = numberArr[i],
                el = els[index];
                el.style.backgroundColor = colorArr[i];
        }
    }, time);
}
